<template>
  <div class="passenger-inf">
    <div class="left-part">
      <div class="title">乘机人</div>
      <passenger-inf-box
        :number="1"
        v-model:identity="identity1"
        @addInsurance="addInsurance"
        @discardInsurance="discardInsurance"
        @isAdult="isAdult"
        @isChild="isChild"
        ref="passenger1"
      ></passenger-inf-box>
      <passenger-inf-box
        v-if="count >= 2"
        :number="2"
        v-model:identity="identity2"
        @addInsurance="addInsurance"
        @discardInsurance="discardInsurance"
        @isAdult="isAdult"
        @isChild="isChild"
        ref="passenger2"
      ></passenger-inf-box>
      <passenger-inf-box
        v-if="count >= 3"
        :number="3"
        v-model:identity="identity3"
        @addInsurance="addInsurance"
        @discardInsurance="discardInsurance"
        @isAdult="isAdult"
        @isChild="isChild"
        ref="passenger3"
      ></passenger-inf-box>
      <passenger-inf-box
        v-if="count >= 4"
        :number="4"
        v-model:identity="identity4"
        @addInsurance="addInsurance"
        @discardInsurance="discardInsurance"
        @isAdult="isAdult"
        @isChild="isChild"
        ref="passenger4"
      ></passenger-inf-box>
       
      <div class="addPassenger">
        <div class="hint">
           最多添加4位乘机人
        </div>
        <div>
          <input
          class="blue"
          type="button"
          value="添加一位乘机人"
          @click="addPassenger"
        />
        <div class="separator">
        </div>
        <input
          class="yellow"
          type="button"
          value="减少一位乘机人"
          @click="discardPassenger"
        />
        </div>
        
      </div>
      <div class="title">联系人</div>
      <contact-box ref="contact"></contact-box>
      <div class="clause">
        <input type="checkbox" @click="changeIsRead" />
        阅读并已同意
        <router-link to="passengerClause" target="_blank"
          >《购票须知》</router-link
        >
      </div>
      <input type="button" value="确认信息，下一步" @click="submitForm" />
    </div>
    <fixed-box 
    :adultAmount="adultAmount"
    :childAmount="childAmount"
    :insuranceTotalPrice="insuranceTotalPrice"
    ref="fixedBox"
    ></fixed-box>
  </div>
</template>
<script lang="ts">
import store from "@/store";
import { defineComponent, ref } from "vue";
import PassengerInfBox from "@/components/BuyTicket/PassengerInf/PassengerInfBox.vue";
import ContactBox from "@/components/BuyTicket/PassengerInf/ContactBox.vue";
import FixedBox from "@/components/BuyTicket/PassengerInf/FixedBox.vue";
import { ElMessage } from 'element-plus';

export default defineComponent({
  components: {
    PassengerInfBox,
    ContactBox,
    FixedBox,
  },
  setup(props,context) {
    const ticketInfo = store.state.ticketInfo;
    //储存dom
    const passenger1 = ref(null);
    const passenger2 = ref(null);
    const passenger3 = ref(null);
    const passenger4 = ref(null);
    const contact = ref(null);
    const fixedBox = ref(null);
    //保险
    const insuranceTotalPrice = ref(0);
    const addInsurance = () => {  
      insuranceTotalPrice.value += 30;
    }
    const discardInsurance = () => {  
      insuranceTotalPrice.value -= 30;
    }
    //传给子子组件的参数
    const identity1 = ref("child");
    const identity2 = ref("child");
    const identity3 = ref("child");
    const identity4 = ref("child");
    //用于更新人数的事件
    const adultAmount = ref(ticketInfo.pAmount[0]);
    const childAmount = ref(ticketInfo.pAmount[1]);
    const isAdult = () => {
      adultAmount.value++;
      childAmount.value--;
    };
    const isChild = () => {
      adultAmount.value--;
      childAmount.value++;
    };
    if (ticketInfo.pAmount[0] >= 1) {
      identity1.value = "adult";
    }
    if (ticketInfo.pAmount[0] >= 2) {
      identity2.value = "adult";
    }
    if (ticketInfo.pAmount[0] >= 3) {
      identity3.value = "adult";
    }
    if (ticketInfo.pAmount[0] >= 4) {
      identity4.value = "adult";
    }
    //乘客个数
    let cnt = ticketInfo.pAmount[0] + ticketInfo.pAmount[1];
    const count = ref(cnt);
    const addPassenger = () => {
        count.value++;
      let addP = (identity: String) => {
        if (identity === "adult") {
          adultAmount.value++;
        } else {
          childAmount.value++;
        }
      };
      if (count.value == 2) {
        addP(identity2.value);
      }
      if (count.value == 3) {
        addP(identity3.value);
      }
      if (count.value == 4) {
        addP(identity4.value);
      }
    };
    const discardPassenger = () => {
      if (count.value >= 4) {
        count.value = 3;
      } else if (count.value == 1) {
        return;
      } else {
        count.value--;
      }
      let temp = count.value + 1;
      let change = (information: Object) => {
        if ((information as any).identity === "adult" ) {
          adultAmount.value --;
        } else {
          childAmount.value --;
        }
        if ((information as any).insurance1 === true) {
          discardInsurance();
        }
        if ((information as any).insurance2 === true) {
          discardInsurance();
        }
      }
      if (temp === 2) {
        change((passenger2 as any).value.information);
      } else  if (temp === 3) {
        change((passenger3 as any).value.information);
      } else  if (temp === 4) {
        change((passenger4 as any).value.information);
      } 
    }
    const submitForm = () => {
      let flag = true;
      (passenger1.value as any).form.validate(
        (valid: boolean) => {
          flag = flag && valid;
        }
      );
      if (count.value >= 2) {
        (passenger2.value as any).form.validate(
          (valid: boolean) => {
            flag = flag && valid;
          }
        );
      }
      if (count.value >= 3) {
        (passenger3.value as any).form.validate(
          (valid: boolean) => {
            flag = flag && valid;
          }
        );
      }
      if (count.value >= 4) {
        (passenger4.value as any).form.validate(
          (valid: boolean) => {
            flag = flag && valid;
          }
        );
      }
      if (isRead.value === false) {
         ElMessage({
            showClose: true,
            message: '请阅读并勾选《购票须知》',
            type: 'error',
            offset: 200,
          });
      }
      flag = flag && isRead.value;
    
      (contact.value as any).form.validate((
        valid: boolean) => {
        flag = flag && valid;
      });
      if (flag === true) {
        const handle = (information: any) => {
          if (information.identity === "adult") {
            information.isChild =false;
          } else {
            information.isChild = true;
          }
          delete information.identity;
        }
        handle((passenger1.value as any).information);
        const order = {
          flight:{flightId: ticketInfo.flightId,ticketType: 0,departureDate: ticketInfo.departureDate},
          passengers: [(passenger1.value as any).information],
          contact: (contact.value as any).information,
          totalPrice: (fixedBox.value as any).getTotalPrice
        };
        //更改类型为数字
        if (ticketInfo.ticketType === '尊享头等舱') {
          order.flight.ticketType = 3;
        } else if (ticketInfo.ticketType === '标准公务舱') {
          order.flight.ticketType = 2;
        } else if (ticketInfo.ticketType === '折扣经济舱') {
          order.flight.ticketType = 1;
        } else {
          alert('传入的机票类型有误');
        }
        if (count.value >= 2) {
          handle((passenger2.value as any).information);
          order.passengers.push((passenger2.value as any).information);
        }
        if (count.value >= 3) {
          handle((passenger3.value as any).information);
          order.passengers.push((passenger3.value as any).information);
        }
        if (count.value >= 4) {
          handle((passenger4.value as any).information);
          order.passengers.push((passenger4.value as any).information);
        }
        //检测是否有身份证号重复
        for (let i = 0; i < order.passengers.length; i++) {
          for (let j = 0; j < order.passengers.length; j++) {
            if (order.passengers[i].ID === order.passengers[j].ID) {
              ElMessage({
                showClose: true,
                message: '乘客的身份证号重复，请检查！',
                type: 'error',
                offset: 200,
              });
              return;
            }
          }
        }
        context.emit('getOrder',order);
        context.emit('next1');
      }  
        
    };
   
    const isRead = ref(false);
    const changeIsRead = () => {
      if (!isRead.value) {
        isRead.value = true;
      } else {
        isRead.value = false;
      }
    };
    return {
      passenger1,
      passenger2,
      passenger3,
      passenger4,
      contact,
      fixedBox,
      submitForm,
      insuranceTotalPrice,
      addInsurance,
      discardInsurance,
      identity1,
      identity2,
      identity3,
      identity4,
      isAdult,
      isChild,
      adultAmount,
      childAmount,
      count,
      addPassenger,
      discardPassenger,
      changeIsRead,
    };
  },
});
</script>	

<style lang="scss" scoped>
@import "@/assets/css/config.scss";
.passenger-inf {
  width: 100%;
}
.left-part {
  display: inline-block;
}
.sticky-box {
  display: inline-block;
  vertical-align: top;
}
.title {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.addPassenger {
  text-align: center;
  width: 660px;
  padding: 5px 20px 30px 20px;
  border: 1px solid $themeLightGray;
}

input[type="button"] {
  position: relative;
  left: 250px;
  cursor: pointer;
  background: rgb(255, 102, 0);
  color: white;
  padding: 20px 30px;
  margin-top: 30px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 3px;
}
.hint{
  position: relative;
  left: -275px;
  color: rgb(90, 165, 240);
}
input[type="button"].blue {
  display: inline-block;
  position: static;
  margin-top: 20px;
  padding: 10px 14px;
  background: rgb(90, 165, 240);
}
.separator{
  display: inline-block;
  width: 50px;
  height: 0;
}
input[type="button"].yellow {
  display: inline-block;
  position: static;
  margin-top: 20px;
  padding: 10px 14px;
  background: #d3b487;
}

.clause {
  margin-top: 30px;
  text-align: center;
  a {
    text-decoration: none;
    color: rgb(90, 165, 240);
  }
  a:hover {
    text-decoration: underline;
  }
}
</style>